<template>
	<view class="app">
		<view class="tixian-select">
			<div class="tixian_method">
				提现方式
			</div>
			<div v-for="(item,index) in payList" :key="index" class="tixian-select-item"  @click="currentSelect=index" >
				<div class="method_left">
					<image :src="url+item.icon" style="width: 44rpx;height: 44rpx;margin-right: 10rpx;"></image>
					<text>{{item.name}}</text>
				</div>
				<label class="radio" style="margin-left: 10px;">
					<image v-if="index==currentSelect" src="https://admin.cqycgyl.com/uploads/20250913/e591aa90abafa1f0a9af851038f33d60.png" style="width: 36rpx;height: 36rpx;"></image>
					<image v-else src="https://admin.cqycgyl.com/uploads/20250913/c0367f322399a9e10de4415f69259d0c.png" style="width: 36rpx;height: 36rpx;"></image>
				</label>
			</div>
		</view>		
		
		<view class="withdraw-top box-card" style="display: none;" >
			<u-icon name="checkmark-circle-fill" color="#42b983" size="50"></u-icon>
			<view class="withdraw-top-type">
				<text>微信提现</text>
				<text>直接提现到微信钱包。</text>
			</view>
		</view>
		<view class="withdraw-middle box-card">
			<text style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #333333;text-align: left;font-style: normal;text-transform: none;">提现金额</text>
			<view class="withdraw-input-container">
				<u-icon name="rmb" size="40"></u-icon> 
				<u-input 
				class="withdraw-input" 
				maxlength="6"  
				v-model="money"  
				type="digit" 
				:border="false" 
				placeholder="请输入提现金额" 
				style="caret-color: #36BE6A;"
				>
					<!-- 1.8.4版本必须使用 slot="suffix" 写法 -->
					<text slot="suffix">全部提现</text>
				</u-input>
				<!-- 请输入提现金额 -->
				<text class="all-withdraw" @click="()=>{money=vuex_user.userMoney;showConfirm=true}">全部提现</text>
			</view>
			<view class="can_with">
				可提现金额￥{{vuex_user.userMoney || 0}}元
			</view>		
		</view>
		<view class="bottom-describ">
			<view style="padding: 0 40rpx;margin: 20rpx 0 0;">
				<u-section :title="'提现说明'" :right="false" line-color="#F16325" :font-size="32"></u-section> 
			</view>
			<view class="withdraw-bottom-row" style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;color: #999999;line-height: 42rpx;text-align: left;font-style: normal;text-transform: none;padding: 20rpx 40rpx 0;">
				<text class="withdraw-balance-tips" v-for="(text,index) in tixian_desc" :key="index">{{text}}</text>
			</view>
		</view>
	<!-- INSERT_YOUR_CODE -->
	<!-- 银行卡选择弹窗 -->
	<u-popup v-model="showCardDrawer" height="750rpx" mode="bottom" border-radius="30" safe-area-inset-bottom>
		<view class="add-card-popup">
			<view class="add-card-popup-title">
				<view class="add-card-popup-title-text">选择银行卡</view>
				<view class="add-card-popup-title-close" @click="showCardDrawer=false">
					<u-icon name="close" color="#333" size="30"></u-icon>
				</view>
			</view>
			<scroll-view class="add-card-popup-content" v-if="cardList.length > 0" scroll-y>
				<view class="add-card-popup-content-item" :style="{background:item.bgColor}" v-for="(item, idx) in cardList" :key="idx" @click="confirmTixian(item)" >
					<image class="add-card-popup-content-item-icon" :src="item.icon" />
					<view class="add-card-popup-content-info">
						<view class="bank-name">{{item.bank_name}}</view>
						<view class="chuxuka">储蓄卡</view>
					</view>
					<view class="add-card-popup-content-item-right">
						<span class="bank-code">****  {{ getBankCode(item.bank_code) }}</span>
					</view>
					
				</view>
			</scroll-view>
			<view v-else style="text-align: center; color: #999; font-size: 28rpx; margin: 40rpx 0;">
				暂无银行卡，请先添加
			</view>
			<button class="add-card-popup-button" @click="gotoAddCard">
				<image src="https://admin.cqycgyl.com/uploads/20250913/d1fec92a13aa92c7ad045a44ec29a615.png"
				style="width: 40rpx;height: 40rpx;"
				></image>
				添加银行卡</button>			
		</view>
	</u-popup>

		<tixian-success v-model="tixianobj.showSuccessDrawer"
			:money="tixianobj.money"
			:method="tixianobj.method"
			:fuwuFee="tixianobj.fuwuFee"
			:expectedTime="tixianobj.expectedTime"
			:status="tixianobj.status"
			:time="tixianobj.time"
			:title="tixianobj.title"
			:navUrl="tixianobj.navUrl"
		 ></tixian-success>

		 <button  @click="withdraw" class="u-size-default">立即提现</button>
	</view>
</template>
<style scoped> 
	.user-money-box{background: url('https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/img/tixian.png') no-repeat center center;background-size: 100% 100%;width: 750rpx;height: 600rpx;}
	.withdraw-top-type{ margin-left: 20rpx;display: flex;flex-direction: column;}
	.withdraw-top-type text:nth-child(1){font-weight: bold;font-size: 36rpx;margin-bottom: 6rpx;color:#333;}
	.withdraw-middle{display: flex;flex-direction: column;margin-top: 24rpx;}
	.withdraw-input-container{		
		margin-bottom: 20rpx;
		margin-top:20rpx;
		padding-bottom:30rpx;
		border-bottom: 1px solid #eee;
		display: flex;
		align-items: center;
	}
	.withdraw-input{margin-left: 10rpx;}
	.all-withdraw{
		margin-left: auto;
		background: none;
		color: #F16325;
		border: none;
	}
	
	.withdraw-balance{font-size: 24rpx;margin-top: 10rpx;}
	.withdraw-balance text{color:red;margin:0 10rpx;font-size: 26rpx;}
	.withdraw-balance text:nth-child(2){font-size: 24rpx;}
	.withdraw-bottom-row {padding: 20rpx;}
	.withdraw-balance-tips{display: block; font-size: 28rpx;
		color: #666666;}

	.tixian{
		position: relative;
		display: flex;
		flex-direction: column;
		width: 600rpx;
		height: 376rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: white;
	}

	.tixian-select{
		margin: 24rpx auto;
		padding: 30rpx;
		background: white;		
		width: 690rpx;
		height: 376rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

	}
	.tixian_method{
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.method_left{
		display:flex;
		max-width: 50vw;
		align-items: center;
	}
	.method_left text{
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		margin-left: 20rpx;
	}
	
	 .tixian-select-item{
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		margin-top: 40rpx;
	}	
	
	/* 提现成功抽屉样式 */
	.success-drawer {
		padding: 40rpx 30rpx 30rpx;
		max-height: 80vh;
		overflow-y: auto;
	}
	
	.drawer-header {
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.success-icon {
		margin-bottom: 20rpx;
	}
	
	.success-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.success-subtitle {
		font-size: 28rpx;
		color: #666;
	}
	
	.withdraw-info {
		background: #f8f9fa;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 40rpx;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	
	.info-item:last-child {
		margin-bottom: 0;
	}
	
	.info-label {
		font-size: 28rpx;
		color: #666;
	}
	
	.info-value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.timeline {
		margin-bottom: 40rpx;
	}
	
	.timeline-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}
	
	.timeline-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
		position: relative;
	}
	
	.timeline-item:last-child {
		margin-bottom: 0;
	}
	
	.timeline-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #ddd;
		margin-right: 20rpx;
		margin-top: 8rpx;
		flex-shrink: 0;
	}
	
	.timeline-item.active .timeline-dot {
		background: #36BE6A;
	}
	
	.timeline-content {
		flex: 1;
	}
	
	.timeline-title-text {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 8rpx;
		font-weight: 500;
	}
	
	.timeline-time {
		font-size: 26rpx;
		color: #999;
	}
	
	.timeline-item.active .timeline-title-text {
		color: #36BE6A;
		font-weight: bold;
	}
	
	.drawer-footer {
		text-align: center;
	}

	.bottom-describ{
		width: 690rpx;
		margin: 24rpx auto;
		background: white;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		height: 324rpx;
		padding: 30rpx;
		padding-left: 0;
	}

	.u-size-default{
		width: 690rpx;
		height: 90rpx;
		border-radius: 40rpx;
		margin: 40rpx auto;
		background: #F16325;
		font-size: 32rpx;
		color: #FFFFFF;

	}

	.add-card-popup{
		padding: 34rpx 30rpx;
		width: 750rpx;
		height: 695rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
	}
	.add-card-popup-title{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 60rpx;
		font-size: 36rpx;
		color: #333333;
		height: 50rpx;
		flex-shrink: 0;
	}

	.add-card-popup-title-close{
		margin-left: auto;
	}

	.add-card-popup-content{
		width: 100%;
		flex:1;
		height: 100%;
	}
	.add-card-popup-content-item{
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background: #C65255;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		flex-shrink: 0;

	}
	.add-card-popup-content-item:not(:first-child){
		margin-top: 20rpx;
	}
	.add-card-popup-content-item-icon{
		width: 64rpx;
		height: 64rpx;
	}
	.add-card-popup-content-info{
		margin-left: 20rpx;
	}
	.bank-name{
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.chuxuka{
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.add-card-popup-content-item-right{
		margin-left: auto;
	}
	.bank-code{
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
		width: 176rpx;
		height: 44rpx;
		
	}
	.add-card-popup-button{
		width: 100%;
		flex-shrink: 0;
		height: 90rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx dashed #F16325;
		margin-left: auto;
		background: none;
		font-weight: 400;
		font-size: 28rpx;
		color: #F16325;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.radio-container /deep/ radio .wx-radio-input.wx-radio-input-checked::before {
  color: #d94c4c; /* 选中对勾颜色 */
}

</style>
<script>
    import tixianSuccess from '@/components/tixian-success.vue';
	export default {
		components: {
			tixianSuccess
		},
		data() {
			return {
				url: 'https://admin.cqycgyl.com',
				bankTank:{},
				tixianobj:{
					showSuccessDrawer:false,
					title:'提现成功!',
					money:'',
					method:'银行卡',
					fuwuFee:0,
					expectedTime:'',
					status:1,
					time:'',
					navUrl:'/pages/my/withdrawlist'
				},
				tixian_desc:[],
				money:'',
				payList:[
					{name:'支付宝账户',icon:'/uploads/20250909/e99e9d7bff5bb96321dc3b12157e68df.png'},
					{name: '微信账户',icon: '/uploads/20250909/380b8093f4e6edc7ee2b5f0d9e21b9a9.png'},
					{name:'银行卡账户',icon:'/uploads/20250909/53c7d2dcb9388b6e497adbded6a9afa0.png'}
				],
				currentSelect:0,
				showCardDrawer:false,
				cardList:[],
				selectedCard:null,
				showConfirm:false,
				showSuccessDrawer: false,
				currentTime: '',
				expectedTime: ''
			}
		},
		onLoad(){
			this.$u.api.user.getBankIcon().then(res => {
				if(res.code == 1){
					this.bankTank = res.data;
				}
			}).then(()=>{
				this.$u.api.user.getUserBank().then(res => {
					this.cardList = res.data;
					this.cardList.forEach(item => {
						item.icon =this.url+ this.getBankIcon(item.bank_name);
						item.bgColor = this.getBankColor(item.bank_name);
					})
				})
				this.$u.api.describ.tixian().then(res => {
					this.tixian_desc = res.data;
				})
			})
			
		},
		methods:{ 
			getBankIcon(bank_name){
				return this.bankTank[bank_name].icon;
			},
			getBankColor(bank_name){
				return this.bankTank[bank_name].bgColor;
			},
			getBankCode(bank_code){
				return bank_code.slice(-4);
			},
			confirmTixian(card){
				this.selectedCard = card;
				uni.showLoading({
					title:'提现中...',
					mask:true
				})
				this.$u.api.user.withdraw({
					money:this.money,
					bank_code:this.selectedCard.bank_code,
					bank_name:this.selectedCard.bank_name,
					bank_user:this.selectedCard.bank_user
				})
				.then(res => {
					if(res.code == 1){
						//提现成功后
						this.showCardDrawer = false;
						uni.hideLoading();
						
						// 设置时间
						this.currentTime = this.formatTime(new Date());
						this.expectedTime = this.getExpectedTime();
						
						// 显示成功抽屉
						this.tixianobj.showSuccessDrawer = true;
						this.tixianobj.money = this.money;
						this.tixianobj.method = '银行卡';
						this.tixianobj.fuwuFee = res.data.fuwuFee;
						this.tixianobj.expectedTime = res.data.expectedTime;
						this.tixianobj.status = res.data.status;
						this.tixianobj.time = res.data.time;
						this.tixianobj.title = res.data.title;
						
						this.$u.api.user.getUserData().then(res => {
							
							this.$u.vuex('vuex_user.userMoney', res.data.yue);
						})
					}
					
					uni.showToast({
						title:res.msg,
						icon:'none'
					});
					
					
				})
			},
			selectCard(card){
				

				this.selectedCard = card;
				//直接触发提现
				
			},
			
			gotoAddCard(){
				uni.navigateTo({ url: '/pages/my/card' });
			},
			navigateTo(url){
				uni.navigateTo({ url: url });

			},
			gotoPage(path){
				uni.navigateTo({ url: path });
			},
			getUserInfo(){
				uni.$emit("updateUserInfo")
			},
			withdraw(){
				if(this.money < 1){
					uni.showToast({
						title:'提现金额不能小于1元',
						icon:'none'
					})
					return;
				}
				if(this.currentSelect == 0){
					//微信提现
					this.$u.api.user.weixin_prepay({
						money:this.money
					}).then(res => {
						uni.hideLoading();
						if(res.code == 1){
							if(res.need_approval){
								this.$u.vuex('vuex_user.userMoney', this.vuex_user.userMoney - this.money);
								
								// 设置时间
								this.currentTime = this.formatTime(new Date());
								this.expectedTime = this.getExpectedTime();
								
								// 显示成功抽屉
								this.tixianobj.showSuccessDrawer = true;
								this.tixianobj.money = this.money;
								this.tixianobj.method = res.data.method;
								this.tixianobj.fuwuFee = res.data.fuwuFee;
								this.tixianobj.expectedTime = res.data.expectedTime;
								this.tixianobj.status = res.data.status;
								this.tixianobj.time = res.data.time;
								this.tixianobj.title = res.data.title;
							}else{
								//不需要审核，直接提现
								uni.requestMerchantTransfer({
									mchId: res.data.withdraw_result.mchId,
									appId: res.data.withdraw_result.appId,
									package: res.data.withdraw_result.package,
									success: (result) => {
										console.log(result);
										if(result.errMsg == 'requestMerchantTransfer:ok'){
											
											// 设置时间
											this.currentTime = this.formatTime(new Date());
											this.expectedTime = this.getExpectedTime();
											
											// 显示成功抽屉
											this.tixianobj.showSuccessDrawer = true;
											this.tixianobj.money = this.money;
											this.tixianobj.method = res.data.method;
											this.tixianobj.fuwuFee = res.data.fuwuFee;
											this.tixianobj.expectedTime = res.data.expectedTime;
											this.tixianobj.status = res.data.status;
											this.tixianobj.time = res.data.time;
											this.tixianobj.title = res.data.title;
										}
										
									},fail: (ress) => {
										if(ress.result == 'cancel'){
											this.$u.api.user.cancelConfirm({id:res.data.id})
											console.log(ress);
											uni.showToast({
												title:'用户取消提现',
												icon:'none'
											})
										}else{
											uni.showToast({
												title:'提现失败:'+ress.errMsg,
												icon:'error'
											})
										}
										
									}
								});
							}

							
							
						}else{
							uni.showModal({
								title: '提示',
								content: res.msg,
								success: function (res) {
									
								}
							}); 
						}
						
						
					})
				}else if(this.currentSelect==1){
					let realName = uni.getStorageSync("realName");
					if(!realName || realName===''){
						uni.showModal({
							title: '首次支付宝提现实名认证',
							editable: true,
							content: '',
							placeholderText: '首次支付宝提现需要真实姓名',
							success:(ress)=>{
								if(ress.confirm&&ress.content&&ress.content.trim()!==''){
									uni.setStorageSync('realName',ress.content)
									return this.withdraw();
								}
							}
						})
					}else{

						//支付宝提现
						this.$u.api.user.alipayWithdraw({
							money: this.money,
							realName: realName
						}).then(res=>{
							if(res.code==1){
								this.tixianobj.showSuccessDrawer = true;
								this.tixianobj.money = this.money;
								this.tixianobj.method = res.data.method;
								this.tixianobj.fuwuFee = res.data.fuwuFee;
								this.tixianobj.expectedTime = res.data.expectedTime;
								this.tixianobj.status = res.data.status;
								this.tixianobj.time = res.data.time;
								this.tixianobj.title = res.data.title;
							}else{
								uni.showModal({
									title: '提现失败',
									content: res.msg
								})
							}
						})
					}

				}else{
					//银行卡提现
					this.showCardDrawer = true;

				}
			},
			viewWithdrawList() {
				uni.navigateTo({ url: '/pages/my/withdrawlist' });
			},
			closeSuccessDrawer() {
				this.showSuccessDrawer = false;
			},
			// 格式化时间
			formatTime(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}`;
			},
			// 计算预计到账时间
			getExpectedTime() {
				const now = new Date();
				// 跳过周末，计算3个工作日后的时间
				let workDays = 0;
				let currentDate = new Date(now);
				
				while (workDays < 3) {
					currentDate.setDate(currentDate.getDate() + 1);
					// 如果是工作日（周一到周五）
					if (currentDate.getDay() !== 0 && currentDate.getDay() !== 6) {
						workDays++;
					}
				}
				
				return this.formatTime(currentDate);
			}
		},
		onShow() {  
			this.getUserInfo()
		}
	}
</script>
